<template>
    <a-modal :visible="state.visible" :title="state.formData.goodsCode?'编辑商品':'新增商品'" @cancel="handleCancel" @ok="handleOk" width="100%"
        wrapClassName="full-modal">
        <AForm ref="formRef" :model="state.formData" :labelCol="{ style: 'width:120px' }">
            <ARow>
                <ACol :span="8">
                    <AFormItem label="商品名称" name="goodsName" :rules="[{required:true,message:'必填'}]">
                        <AInput v-if="!props.isDetail" v-model:value="state.formData.goodsName"></AInput>
                        <span v-if="props.isDetail">{{ state.formData.goodsName }}</span>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
                    <AFormItem label="商品类型" name="type" :rules="[{required:true,message:'必填'}]">
                        <ASelect v-if="!props.isDetail" v-model:value="state.formData.type">
                            <ASelectOption :value="GoodsTypeEnum.THING">实物</ASelectOption>
                            <ASelectOption :value="GoodsTypeEnum.SERVICE">服务</ASelectOption>
                        </ASelect>
                        <span v-if="props.isDetail">
                            <span v-if="state.formData.type===GoodsTypeEnum.THING">实物</span>
                            <span v-if="state.formData.type===GoodsTypeEnum.SERVICE">服务</span>
                        </span>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
                    <AFormItem label="商品品类" name="categoryId" :rules="[{required:true,message:'必填'}]">
                        <ASelect v-if="!props.isDetail" v-model:value="state.formData.categoryId" :options="goodsCategoryListOptions"></ASelect>
                        <span v-if="props.isDetail">
                            <span v-for="(option,optIndex) in goodsCategoryListOptions" :key="optIndex">
                                <span v-if="option.value == state.formData.categoryId" >{{ option.label }}</span>
                            </span>
                        </span>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
                    <AFormItem label="商品主图" name="mainImage" :rules="[{required:true,message:'必填'}]">
                        <UploadImage v-model:value="state.formData.mainImage"></UploadImage>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow v-if="state.formData.type === GoodsTypeEnum.SERVICE">
                <ACol :span="8">
                    <AFormItem label="服务时长" name="duration" :rules="[{required:true,message:'必填'},{pattern:posIntRegex,message:'数字有误'}]">
                        <AInput v-if="!props.isDetail" v-model:value="state.formData.duration"></AInput>
                        <span  v-if="props.isDetail">{{ state.formData.duration }}</span>
                    </AFormItem>
                </ACol>
                <ACol :span="8">
                    <AFormItem label="是否是热门商品" name="mainImage" :rules="[{required:true,message:'必填'}]">
                        <a-radio-group v-if="!props.isDetail" v-model:value="state.formData.isHot">
                            <a-radio  :value="0">否</a-radio>
                            <a-radio  :value="1">是</a-radio>
                        </a-radio-group>    
                        <span  v-if="props.isDetail">
                            <span v-if="state.formData.isHot===0" >否</span>
                            <span v-if="state.formData.isHot===1" >是</span>
                        </span>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
                    <AFormItem label="原始价格" name="originalPrice" :rules="[{required:true,message:'必填'},{pattern:normalPriceRegex,message:'金额有误'}]">
                        <AInput v-if="!props.isDetail" v-model:value="state.formData.originalPrice"></AInput>
                        <span  v-if="props.isDetail">{{ state.formData.originalPrice }}</span>
                    </AFormItem>
                </ACol>
                <ACol :span="8">
                    <AFormItem label="销售价格" name="salePrice" :rules="[{required:true,message:'必填'},{pattern:normalPriceRegex,message:'金额有误'}]">
                        <AInput v-if="!props.isDetail" v-model:value="state.formData.salePrice"></AInput>
                        <span  v-if="props.isDetail">{{ state.formData.salePrice }}</span>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow>
                <ACol :span="8">
                    <AFormItem label="简介" name="description">
                        <ATextarea v-if="!props.isDetail" v-model:value="state.formData.description"></ATextarea>
                        <span  v-if="props.isDetail">{{ state.formData.description }}</span>
                    </AFormItem>
                </ACol>
            </ARow>
            <ARow>
                <ACol :span="24">
                    <AFormItem label="图文内容" name="context">
                        <RichEditor v-if="!props.isDetail" v-model:value="state.formData.context"></RichEditor>
                        <span  v-if="props.isDetail" v-html="state.formData.context"></span>
                    </AFormItem>
                </ACol>
            </ARow>
        </AForm>
    </a-modal>
</template>
<script lang="ts" setup>
import { ResponseVo, GoodsTypes, GoodsTypeEnum } from "@/type";
import { reactive, ref, onMounted } from "vue";
import UploadImage from "@/components/UploadImage/UploadImage.vue"
import RichEditor from "@/components/Tinymce/index.vue";
import { GoodsService } from "@/service";
import { message } from "ant-design-vue";
import ARow from "ant-design-vue/lib/grid/Row";
import { normalPriceRegex,posIntRegex } from "@/utils/regex";
import useGoods from "../hooks/useGoods";

const props = withDefaults(defineProps<{
    currentGoods?: Partial<GoodsTypes.IGoodsItem>;
    isDetail:boolean
}>(), {
    currentGoods: (): Partial<GoodsTypes.IGoodsItem> => ({}),
    isDetail: false
})

const {goodsCategoryListOptions} = useGoods();

const formRef = ref()
const emit = defineEmits<{
    (e: "ok"): void,
    (e: "cancel"): void
}>()

const state = reactive<{
    formData: Partial<GoodsTypes.IGoodsItem>;
    visible: boolean
}>({
    formData: {},
    visible: true
})

onMounted(() => {
    state.formData = { ...props.currentGoods };
})

const handleOk = () => {
    formRef.value.validateFields().then(async (valid: boolean) => {
        if (valid) {
            let res: ResponseVo<any>
            if (state.formData.goodsCode) {
                res = await GoodsService.editGoods(state.formData as GoodsTypes.IGoodsItem);
            } else {
                res = await GoodsService.addGoods(state.formData as GoodsTypes.IGoodsItem);
            }
            if (res.code === 0) {
                message.success("操作成功！")
                emit("ok");
            }
        }
    })
}

const handleCancel = () => {
    emit("cancel")
}
</script>